Previous Page Next Page
オープンソースによる地図表示（Leaflet編）追加分 その２
2019/5/17 by T. Fujita
追加－２、写真の撮影地を地図上に表示する
追加－２－１、マーカーで写真の撮影地を表示する
多くのデジタル写真には、撮影日時や撮影場所等のEXIFデータが含まれており、スマホによってはデフォルトで写真の撮影場所を地図上に表示できるものがあります。
ここでは、『Leaflet_Tutrial_404.html』を元にEXIFデータが含まれる写真の撮影場所を地図上に表示させてみました。 EXIFデータの取得には『
exif-jsというライブラリ』を使用しています。
また、EXIFデータが含まれていない写真の場合には、画面の中心にマーカーを表示しますので記憶にある撮影地付近に移動させてみて下さい。
表示されたマーカーをクリックすると当該写真がポップアップで表示されます。
なお、PC上の「Safari」では動作しませんでしたが、Android 7.0 及び iOS 12.2 での動作は確認しています。 以下にその表示例とソースファイルの内容を示します。 ソースファイルの内容では、追加した部分を赤字で表示しました。
単独で表示する場合は、『
Leaflet_Tutrial_Additional_003.html 』をクリックして下さい。
写真の撮影地を地図上に表示する例
『 Leaflet_Tutrial_Additional_003.html 』のソースファイル内容
001 <!DOCTYPE html>
002 <html>
003 <head>
004 <title>Leaflet_Tutrial_Additional_003.html 2019/5/17 by T. Fujita</title>
005 <meta charset = "utf-8" />
006 <link rel = "stylesheet" href = "https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" />
007 <link rel = "stylesheet" href = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
008 <link rel = "stylesheet" href = "./Plugins/ms-Dropdown-master/css/msdropdown/dd.css" />
009 <link rel = "stylesheet" href = "./CSS/scroll_menu.css" />
010 <link rel = "stylesheet" href = "./CSS/Original_Style_404.css" />
011
012 <style>
013 html, body {
014 width: 99%;
015 height: 98%;
016 font-size: 14px;
017 z-index: 0;
018 }
019
020 form img {
021 height: 100px;
022 order: 1;
023 }
024
025 </style>
026
027 <script src = "https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
028 <script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
029 <script src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
030 <script src = "https://cdnjs.cloudflare.com/ajax/libs/exif-js/2.2.1/exif.min.js"></script>
031 <script src = "./Plugins/ms-Dropdown-master/js/msdropdown/jquery.dd.js"></script>
032 <script src = "./JS/Dialog_Additional_003.js" ></script>
033 <script>
034 var Marker_LAT = new Array();
035 var Marker_LON = new Array();
036 var Marker_NAM = new Array();
037 var Marker_LNK = new Array();
038 var Marker_ICN = new Array();
039 var Marker_ID = new Array();
040 var Marker_Drag_flag = new Array();
041 var Marker_Drag_info = new Array();
042 var ClickLat = null;
043 var ClickLon = null;
044 var Marker_count = 0;
045 var Marker_ID_count = 0;
046 var SelectedID;
047 var Marker_flag = 0;
048 var Temp_shape, Temp_shape_clone;
049 var Temp, Temp_LAT, Temp_LON, Temp_NAM, Temp_LNK, Temp_ICN, Temp_ID;
050 var Temp_Drag_flag, Temp_Drag_info;
051 var Layer_404 = new Array();
052 var Layer_404_clone = new Array();
053 var Dialog_flag_001 = 0;
054 var Photo_Marker_LAT = new Array();
055 var Photo_Marker_LON = new Array();
056 var Photo_Marker_NAM = new Array();
057 var Photo_Marker_LNK = new Array();
058 var Photo_Marker_ICN = new Array();
059 var Photo_Marker_ID = new Array();
060 var Photo_Marker_Drag_flag = new Array();
061 var Photo_Marker_Drag_info = new Array();
062 var Photo_Marker_count = 0;
063 var Photo_Marker_ID_count = 0;
064 var Layer_AD003 = new Array();
065 var Layer_AD003_clone = new Array();
066 var map_AD003;
067
068 function init() {
069 map_AD003 = L.map('map_AD003').setView([35.0, 137.0], 6);
070 mapLink = '<a href="https://openstreetmap.org">OpenStreetMap</a>';
071 L.tileLayer(
072 // 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
073 // attribution: 'Map data © ' + mapLink,
074 // maxZoom: 18
075
076 'https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png', {
077 attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"
078 }).addTo(map_AD003);
079 map_AD003.on('click', function(e) {
080 ClickLat = e.latlng.lat;
081 ClickLon = e.latlng.lng;
082 if ( Marker_flag == 1 ) { Leaflet_Marker_401(); }
083 if ( Marker_flag == 2 ) { Leaflet_Marker_403(); }
084 });
085 }
086
087 function Leaflet_Marker_400() { // 初期設定（マーカー単独設置）
088 ClickLat = null;
089 ClickLon = null;
090 Marker_flag = 1;
091 }
092
093 function Leaflet_Marker_401() { // マーカー単独設置
094 if(Marker_flag == 1) {
095 Marker_LAT[ Marker_count ] = ClickLat;
096 Marker_LON[ Marker_count ] = ClickLon;
097 Marker_NAM[ Marker_count ] = Set_Text;
098 Marker_LNK[ Marker_count ] = " ";
099 Marker_ICN[ Marker_count ] = L.icon({
100 iconUrl: Icon_Url,
101 iconSize: [Icon_W, Icon_H],
102 iconAnchor : [Icon_AW, Icon_AH],
103 popupAnchor: [Icon_PW, Icon_PH]
104 });
105 Marker_ID[ Marker_count ] = "Marker" + Marker_ID_count;
106 Marker_Drag_flag[ Marker_count ] = true;
107 Marker_Drag_info[ Marker_count ] = "マウスで移動出来ます。";
108 Temp = Marker_count;
109 Marker_setting();
110 Marker_set();
111 Layer_404[ Temp ] = Temp_shape;
112 Layer_404[ Temp ].addTo(map_AD003);
113 Layer_404_clone[ Temp ] = Temp_shape_clone;
114 Layer_404_clone[ Temp ].addTo(map_AD003);
115 Marker_count = Marker_count + 1;
116 Marker_ID_count = Marker_ID_count + 1;
117 Marker_flag = 0;
118 }
119 }
120
121 function Leaflet_Marker_402() { // 初期設定（マーカー連続設置）
122 ClickLat = null;
123 ClickLon = null;
124 Marker_flag = 2;
125 }
126
127 function Leaflet_Marker_403() { // マーカー連続設置
128 if(Marker_flag == 2) {
129 Marker_LAT[ Marker_count ] = ClickLat;
130 Marker_LON[ Marker_count ] = ClickLon;
131 Marker_NAM[ Marker_count ] = Set_Text;
132 Marker_LNK[ Marker_count ] = " ";
133 Marker_ICN[ Marker_count ] = L.icon({
134 iconUrl: Icon_Url,
135 iconSize: [Icon_W, Icon_H],
136 iconAnchor : [Icon_AW, Icon_AH],
137 popupAnchor: [Icon_PW, Icon_PH]
138 });
139 Marker_ID[ Marker_count ] = "Marker" + Marker_ID_count;
140 Marker_Drag_flag[ Marker_count ] = true;
141 Marker_Drag_info[ Marker_count ] = "マウスで移動出来ます。";
142 Temp = Marker_count;
143 Marker_setting();
144 Marker_set();
145 Layer_404[ Temp ] = Temp_shape;
146 Layer_404[ Temp ].addTo(map_AD003);
147 Layer_404_clone[ Temp ] = Temp_shape_clone;
148 Layer_404_clone[ Temp ].addTo(map_AD003);
149 Marker_count = Marker_count + 1;
150 Marker_ID_count = Marker_ID_count + 1;
151 }
152 }
153
154 function Leaflet_Marker_404() { // マーカー連続設置終了
155 Marker_flag = 0;
156 }
157
158 function Leaflet_Marker_405() { // マーカー全消去
159 var j = Layer_404.length - 1;
160 for(i = 0; i <= j; i++) {
161 if(Layer_404[i] != null) {
162 map_AD003.removeLayer(Layer_404[i]);
163 map_AD003.removeLayer(Layer_404_clone[ i ]);
164 }
165 }
166 Marker_count = 0;
167 Marker_LAT = new Array();
168 Marker_LON = new Array();
169 Marker_NAM = new Array();
170 Marker_LNK = new Array();
171 Marker_ICN = new Array();
172 }
173
174 function Leaflet_Marker_406() { // マーカー保存（CSV形式）
175 for (i = 0; i <= (Marker_LON.length - 1); i++) {
176 if( !isNaN(Marker_LON[ i ]) ) {
177 while( (Marker_LON[ i ] * 1.0) < -180) {
178 Marker_LON[ i ] = (Marker_LON[ i ] * 1.0) + 360;
179 }
180 while( (Marker_LON[ i ] * 1.0) > 180) {
181 Marker_LON[ i ] = (Marker_LON[ i ] * 1.0) - 360;
182 }
183 }
184 }
185 if(Marker_LAT[ 0 ] == "LAT(deg.)") {
186 var CSV_content = [];
187 } else {
188 var CSV_content = "LAT(deg.),LONG(deg.),Name(by utf-8),Link,\r\n";
189 }
190 const aTag = document.createElement('a');
191 aTag.download = "CSV_Data.csv";
192 var bom = new Uint8Array([0xEF, 0xBB, 0xBF]);
193 Temp = Marker_LAT.length;
194 for ( i = 0; i < Temp; i++ ) {
195 if( Marker_LAT[ i ] != "" && Marker_LON[ i ] != "" ) {
196 CSV_content = CSV_content + Marker_LAT[ i ] + "," + Marker_LON[ i ] + "," + Marker_NAM[ i ] + "," + Marker_LNK[ i ] + ",\r\n";
197 }
198 }
199 var blob = new Blob([ bom, CSV_content ], { "type": "text/csv"});
200 if(window.navigator.msSaveBlob) {
201 window.navigator.msSaveBlob(blob, aTag.download); // for IE
202 } else if (window.URL && window.URL.createObjectURL) {
203 aTag.href = window.URL.createObjectURL(blob); // for FireFox
204 document.body.appendChild(aTag);
205 aTag.click();
206 document.body.removeChild(aTag);
207 } else if (window.webkitURL && window.webkitURL.createObject) {
208 aTag.href = (window.URL || window.webkitURL).createObjectURL(blob); // for Chrome
209 aTag.click();
210 } else {
211 alert("保存に失敗しました！");
212 }
213 }
214
215 function Leaflet_Marker_407() { // マーカー読込（CSV形式）
216 Dialog_002();
217 }
218
219 function Marker_setting() { // マーカー設定
220 Temp_LAT = Marker_LAT[ Temp ] * 1.0;
221 Temp_LON = Marker_LON[ Temp ] * 1.0;
222 Temp_NAM = Marker_NAM[ Temp ];
223 Temp_LNK = Marker_LNK[ Temp ];
224 Temp_ICN = Marker_ICN[ Temp ];
225 Temp_ID = Marker_ID[ Temp ];
226 Temp_Drag_flag = Marker_Drag_flag[ Temp ]
227 Temp_Drag_info = Marker_Drag_info[ Temp ]
228 Set_Link =" ";
229 if(Temp_LNK != undefined ) {
230 if( String( Temp_LNK ).length > 5 ) {
231 Set_Link = "<a href= '" + Temp_LNK + "' target='_blank'> " + Temp_NAM + "情報にリンク</a>";
232 }
233 }
234 }
235
236 function Marker_set() { // マーカー設置
237 if( !isNaN( Temp_LAT ) && !isNaN( Temp_LON ) ) {
238 if( (Temp_LAT !== undefined) || (Temp_LAT !== "") ) {
239 if( ((Temp_LAT * 1.0) != 0) || ((Temp_LON * 1.0) != 0) ) {
240 Temp_shape = L.marker([ Temp_LAT, Temp_LON ],
241 {icon: Temp_ICN, id: Temp_ID, draggable: Temp_Drag_flag}).bindPopup( Temp_NAM + "<BR>" + Temp_Drag_info + "<BR>" +
242 "<p> <input type='button' value='Change this Marker' class='marker-change-button'/></p>" +
243 Set_Link + "<p> <input type='button' value='Delete this Marker' class='marker-delete-button'/></p>");
244 Temp_shape.on('popupopen', onMarkerOpen ).on('dragend', Dragging);
245 if(Temp_LON >= 0) {
246 Temp_shape_clone = L.marker([ Temp_LAT, (Temp_LON - 360) ],
247 {icon: Temp_ICN, id: Temp_ID, draggable: Temp_Drag_flag}).bindPopup( Temp_NAM + "<BR>" + Temp_Drag_info + "<BR>" +
248 "<p> <input type='button' value='Change this Marker' class='marker-change-button'/></p>" +
249 Set_Link + "<p> <input type='button' value='Delete this Marker' class='marker-delete-button'/></p>");
250 Temp_shape_clone.on('popupopen', onMarkerOpen ).on('dragend', Dragging);
251 } else {
252 Temp_shape_clone = L.marker([ Temp_LAT, (Temp_LON + 360) ],
253 {icon: Temp_ICN, id: Temp_ID, draggable: Temp_Drag_flag}).bindPopup( Temp_NAM + "<BR>" + Temp_Drag_info + "<BR>" +
254 "<p> <input type='button' value='Change this Marker' class='marker-change-button'/></p>" +
255 Set_Link + "<p> <input type='button' value='Delete this Marker' class='marker-delete-button'/></p>");
256 Temp_shape_clone.on('popupopen', onMarkerOpen ).on('dragend', Dragging);
257 }
258 }
259 }
260 }
261 }
262
263 function onMarkerOpen() { // マーカーをクリックした時に表示する削除ボタンと変更ボタン
264 var tempMarker = this;
265 SelectedID = tempMarker.options.id;
266 $(".marker-delete-button:visible").click(function () {
267 if(SelectedID.slice(0,5) =="Photo") {
268 Photo_Marker_DEL(tempMarker);
269 } else {
270 Marker_DEL(tempMarker);
271 }
272 });
273 $(".marker-change-button:visible").click(function () {
274 Dialog_001();
275 });
276 }
277
278 function Change_Marker() { // 変更ボタン押下時の処理
279 for(i = 0; i <= Marker_count; i++) {
280 if(SelectedID == Marker_ID[ i ] ) {
281 if(Set_Text !="") {
282 Marker_NAM[ i ] = Set_Text;
283 }
284 Marker_ICN[ i ] = L.icon({
285 iconUrl: Icon_Url,
286 iconSize: [Icon_W, Icon_H],
287 iconAnchor : [Icon_AW, Icon_AH],
288 popupAnchor: [Icon_PW, Icon_PH]
289 });
290 }
291 }
292 for(i = 0; i <= Photo_Marker_count; i++) {
293 if(SelectedID == Photo_Marker_ID[ i ] ) {
294 if(Set_Text !="") {
295 Photo_Marker_NAM[ i ] = Set_Text;
296 }
297 Photo_Marker_ICN[ i ] = L.icon({
298 iconUrl: Icon_Url,
299 iconSize: [Icon_W, Icon_H],
300 iconAnchor : [Icon_AW, Icon_AH],
301 popupAnchor: [Icon_PW, Icon_PH]
302 });
303 }
304 }
305 Marker_Refresh();
306 Photo_Marker_Refresh();
307 }
308
309 function Marker_DEL(tempMarker) { // 削除ボタン押下時の処理
310 var k = 0;
311 Marker_flag = 0;
312 Marker_LAT[ Marker_count + 1 ] = "";
313 Marker_LON[ Marker_count + 1 ] = "";
314 Marker_NAM[ Marker_count + 1 ] = "";
315 Marker_LNK[ Marker_count + 1 ] = "";
316 Marker_ICN[ Marker_count + 1 ] = "";
317 Marker_ID[ Marker_count + 1 ] = "";
318 SelectedID = tempMarker.options.id;
319 for(i = 0; i <= Marker_count; i++) {
320 if(SelectedID == Marker_ID[ i ] ) {
321 for(k = i; k <= Marker_count; k++) {
322 Marker_LAT[ k ] = Marker_LAT[ k + 1 ];
323 Marker_LON[ k ] = Marker_LON[ k + 1 ];
324 Marker_NAM[ k ] = Marker_NAM[ k + 1 ];
325 Marker_LNK[ k ] = Marker_LNK[ k + 1 ];
326 Marker_ICN[ k ] = Marker_ICN[ k + 1 ];
327 Marker_ID[ k ] = Marker_ID[ k + 1 ];
328 Marker_Drag_flag[ k ] = Marker_Drag_flag[ k + 1 ];
329 Marker_Drag_info[ k ] = Marker_Drag_info[ k + 1 ];
330 }
331 }
332 }
333 SelectedID = null;
334 Marker_count = Marker_count - 1;
335 Marker_Refresh();
336 }
337
338 function Photo_Marker_DEL(tempMarker) { // 削除ボタン押下時の処理（写真用マーカー）
339 var k = 0;
340 Marker_flag = 0;
341 Photo_Marker_LAT[ Photo_Marker_count + 1 ] = "";
342 Photo_Marker_LON[ Photo_Marker_count + 1 ] = "";
343 Photo_Marker_NAM[ Photo_Marker_count + 1 ] = "";
344 Photo_Marker_LNK[ Photo_Marker_count + 1 ] = "";
345 Photo_Marker_ICN[ Photo_Marker_count + 1 ] = "";
346 Photo_Marker_ID[ Photo_Marker_count + 1 ] = "";
347 SelectedID = tempMarker.options.id;
348 for(i = 0; i <= Photo_Marker_count; i++) {
349 if(SelectedID == Photo_Marker_ID[ i ] ) {
350 for(k = i; k <= Photo_Marker_count; k++) {
351 Photo_Marker_LAT[ k ] = Photo_Marker_LAT[ k + 1 ];
352 Photo_Marker_LON[ k ] = Photo_Marker_LON[ k + 1 ];
353 Photo_Marker_NAM[ k ] = Photo_Marker_NAM[ k + 1 ];
354 Photo_Marker_LNK[ k ] = Photo_Marker_LNK[ k + 1 ];
355 Photo_Marker_ICN[ k ] = Photo_Marker_ICN[ k + 1 ];
356 Photo_Marker_ID[ k ] = Photo_Marker_ID[ k + 1 ];
357 Photo_Marker_Drag_flag[ k ] = Photo_Marker_Drag_flag[ k + 1 ];
358 Photo_Marker_Drag_info[ k ] = Photo_Marker_Drag_info[ k + 1 ];
359 }
360 }
361 }
362 SelectedID = null;
363 Photo_Marker_count = Photo_Marker_count - 1;
364 Photo_Marker_Refresh();
365 }
366
367 function Marker_Refresh() { // マーカー再表示
368 var j = Layer_404.length - 1;
369 for(i = 0; i <= j; i++) {
370 if(Layer_404[ i ] != null) {
371 map_AD003.removeLayer(Layer_404[ i ]);
372 map_AD003.removeLayer(Layer_404_clone[ i ]);
373 }
374 }
375 for (i = 0; i <= Marker_count - 1; i++)
376 {
377 Temp = i;
378 Marker_setting();
379 Marker_set();
380 Layer_404[ Temp ] = Temp_shape;
381 Layer_404[ Temp ].addTo(map_AD003);
382 Layer_404_clone[ Temp ] = Temp_shape_clone;
383 Layer_404_clone[ Temp ].addTo(map_AD003);
384 }
385 }
386
387 function Photo_Marker_Refresh() { // 写真用マーカー再表示
388 var j = Layer_AD003.length - 1;
389 for(i = 0; i <= j; i++) {
390 if(Layer_AD003[ i ] != null) {
391 map_AD003.removeLayer(Layer_AD003[ i ]);
392 map_AD003.removeLayer(Layer_AD003_clone[ i ]);
393 }
394 }
395 for (i = 0; i <= Photo_Marker_count - 1; i++)
396 {
397 Temp = i;
398 Photo_Marker_Setting();
399 Photo_Marker_Set();
400 Layer_AD003[ Temp ] = Temp_shape;
401 Layer_AD003[ Temp ].addTo(map_AD003);
402 Layer_AD003_clone[ Temp ] = Temp_shape_clone;
403 Layer_AD003_clone[ Temp ].addTo(map_AD003);
404 }
405 }
406
407 function Dragging() { // マーカーをドラッグ時の位置取得
408 ClickLat = this._latlng.lat;
409 ClickLon = this._latlng.lng;
410 SelectedID = this.options.id;
411 if(SelectedID.slice(0,5) == "Photo") {
412 for(i = 0; i <= Photo_Marker_count; i++) {
413 if(SelectedID == Photo_Marker_ID[ i ] ) {
414 Photo_Marker_LAT[ i ] = ClickLat;
415 Photo_Marker_LON[ i ] = ClickLon;
416 }
417 }
418 Photo_Marker_Refresh();
419 } else {
420 for(i = 0; i <= Marker_count; i++) {
421 if(SelectedID == Marker_ID[ i ] ) {
422 Marker_LAT[ i ] = ClickLat;
423 Marker_LON[ i ] = ClickLon;
424 }
425 }
426 Marker_Refresh();
427 }
428 SelectedID = null;
429 }
430
431 function CSV_Markers() { // CSVデータを表示
432 for (i = 0; i <= (Data_CSV.length - 1); i++) {
433 if((Data_CSV[i][0] * 1.0) > 90) {
434 Data_CSV[i][0] = 90;
435 }
436 if((Data_CSV[i][0] * 1.0) < -90) {
437 Data_CSV[i][0] = -90;
438 }
439 while( (Data_CSV[i][1] * 1.0) < -180) {
440 Data_CSV[i][1] = Data_CSV[i][1] * 1.0 + 360;
441 }
442 while( (Data_CSV[i][1] * 1.0) > 180) {
443 Data_CSV[i][1] = Data_CSV[i][1] * 1.0 - 360;
444 }
445 }
446 for (i = 0; i <= (Data_CSV.length - 1); i++) {
447 Marker_LAT[ Marker_count ] = Data_CSV[i][0];
448 Marker_LON[ Marker_count ] = Data_CSV[i][1];
449 Marker_NAM[ Marker_count ] = Data_CSV[i][2];
450 Marker_LNK[ Marker_count ] = Data_CSV[i][3];
451 Marker_ICN[ Marker_count ] = L.icon({
452 iconUrl: Icon_Url,
453 iconSize: [Icon_W, Icon_H],
454 iconAnchor : [Icon_AW, Icon_AH],
455 popupAnchor: [Icon_PW, Icon_PH]
456 });
457 Marker_ID[ Marker_count ] = "Marker" + Marker_ID_count;
458 Marker_Drag_flag[ Marker_count ] = false;
459 Marker_Drag_info[ Marker_count ] = "移動出来ません。";
460 if( Data_CSV[i][0] != "" ) {
461 if( !isNaN( Data_CSV[i][0] ) ) {
462 Temp = Marker_count;
463 Marker_setting();
464 Marker_set();
465 Layer_404[ Temp ] = Temp_shape;
466 Layer_404[ Temp ].addTo(map_AD003);
467 Layer_404_clone[ Temp ] = Temp_shape_clone;
468 Layer_404_clone[ Temp ].addTo(map_AD003);
469 Marker_count = Marker_count + 1;
470 Marker_ID_count = Marker_ID_count + 1;
471 }
472 }
473 }
474 }
475
476 function Leaflet_Photo_001() { // 写真ファイル読込
477 Dialog_Additional_002();
478 }
479
480 function Leaflet_Photo_002() { // 写真用マーカー全消去
481 var j = Layer_AD003.length - 1;
482 for(i = 0; i <= j; i++) {
483 if(Layer_AD003[i] != null) {
484 map_AD003.removeLayer(Layer_AD003[i]);
485 map_AD003.removeLayer(Layer_AD003_clone[ i ]);
486 }
487 }
488 Photo_Marker_count = 0;
489 Photo_Marker_LAT = new Array();
490 Photo_Marker_LON = new Array();
491 Photo_Marker_NAM = new Array();
492 Photo_Marker_LNK = new Array();
493 Photo_Marker_ICN = new Array();
494 }
495
496 function Photo_Marker_Setting() { // 写真用マーカー設定
497 Temp_LAT = Photo_Marker_LAT[ Temp ] * 1.0;
498 Temp_LON = Photo_Marker_LON[ Temp ] * 1.0;
499 Temp_NAM = Photo_Marker_NAM[ Temp ];
500 Temp_LNK = Photo_Marker_LNK[ Temp ];
501 Temp_ICN = Photo_Marker_ICN[ Temp ];
502 Temp_ID = Photo_Marker_ID[ Temp ];
503 Temp_Drag_flag = Photo_Marker_Drag_flag[ Temp ]
504 Temp_Drag_info = Photo_Marker_Drag_info[ Temp ]
505 Set_Link =" ";
506 }
507
508 function Photo_Marker_Set() { // 写真用マーカー設置
509 if( !isNaN( Temp_LAT ) && !isNaN( Temp_LON ) ) {
510 if( (Temp_LAT !== undefined) || (Temp_LAT !== "") ) {
511 if( ((Temp_LAT * 1.0) != 0) || ((Temp_LON * 1.0) != 0) ) {
512 Temp_shape = L.marker([ Temp_LAT, Temp_LON ],
513 {icon: Temp_ICN, id: Temp_ID, draggable: Temp_Drag_flag}).bindPopup( Temp_NAM + "<BR>" + Temp_Drag_info + "<BR>" +
514 "<p><center> <img src = '" + window.URL.createObjectURL(Temp_LNK) + "' width='300'></center></p>" +
515 "<p> <input type='button' value='Change this Marker' class='marker-change-button'/>" +
516 " <input type='button' value='Delete this Marker' class='marker-delete-button'/></p>");
517 Temp_shape.on('popupopen', onMarkerOpen ).on('dragend', Dragging);
518 if(Temp_LON >= 0) {
519 Temp_shape_clone = L.marker([ Temp_LAT, (Temp_LON - 360) ],
520 {icon: Temp_ICN, id: Temp_ID, draggable: Temp_Drag_flag}).bindPopup( Temp_NAM + "<BR>" + Temp_Drag_info + "<BR>" +
521 "<p><center> <img src = '" + window.URL.createObjectURL(Temp_LNK) + "' width='300'></center></p>" +
522 "<p> <input type='button' value='Change this Marker' class='marker-change-button'/>" +
523 " <input type='button' value='Delete this Marker' class='marker-delete-button'/></p>");
524 Temp_shape_clone.on('popupopen', onMarkerOpen ).on('dragend', Dragging);
525 } else {
526 Temp_shape_clone = L.marker([ Temp_LAT, (Temp_LON + 360) ],
527 {icon: Temp_ICN, id: Temp_ID, draggable: Temp_Drag_flag}).bindPopup( Temp_NAM + "<BR>" + Temp_Drag_info + "<BR>" +
528 "<p><center> <img src = '" + window.URL.createObjectURL(Temp_LNK) + "' width='300'></center></p>" +
529 "<p> <input type='button' value='Change this Marker' class='marker-change-button'/>" +
530 " <input type='button' value='Delete this Marker' class='marker-delete-button'/></p>");
531 Temp_shape_clone.on('popupopen', onMarkerOpen ).on('dragend', Dragging);
532 }
533 }
534 var image = document.createElement('img');
535 image.src = window.URL.createObjectURL(Temp_LNK);
536 }
537 }
538 }
539
540 </script>
541 </head>
542 <body onload="init()">
543 <nav id="menu-wrap" style="z-index: 1000;">
544 <ul id="menu" style="width: 97.3%;">
545 <li><a href="#">マーカー設定</a>
546 <ul>
547 <li><a href="#" onclick = "Dialog_001()">マーカーのスタイル設定</a></li>
548 <li><a href="#" onclick = "Leaflet_Marker_400()">マーカー単独設置 </a></li>
549 <li><a href="#" onclick = "Leaflet_Marker_402()">マーカー連続設置 </a></li>
550 <li><a href="#" onclick = "Leaflet_Marker_404()">マーカー連続設置終了 </a></li>
551 <li><a href="#" onclick = "Leaflet_Marker_405()">マーカー全消去 </a></li>
552 <li><a href="#" onclick = "Leaflet_Marker_406()">マーカー保存（CSV形式） </a></li>
553 <li><a href="#" onclick = "Leaflet_Marker_407()">マーカー読込（CSV形式） </a></li>
554 </ul>
555 </li>
556 <li><a href="#">写真の撮影地表示</a>
557 <ul>
558 <li><a href="#" onclick = "Dialog_001()">マーカーのスタイル設定</a></li>
559 <li><a href="#" onclick = "Leaflet_Photo_001()">写真ファイル読込 </a></li>
560 <li><a href="#" onclick = "Leaflet_Photo_002()">写真用マーカー全消去 </a></li>
561 </ul>
562 </li>
563 </ul>
564 </nav>
565 <div id="map_Layer">
566 <div id="map_AD003" style="width: 100%; height: 95%; border: solid 1px"></div>
567 ここで使用しているアイコン素材は、<A HREF = "http://flat-icon-design.com/" target="_blank"> FLAT ICON DESIGN </A>および
568 <A HREF = "http://icooon-mono.com/" target="_blank"> ICOON MONO </A>から取得しており、これらアイコン素材データの著作権は TopeconHeroes が保持しています。
569 </div>
570 </body>
571 </html>
『 Dialog_Additional_003.js 』は、『Dialog_404.js』を元に写真ファイルの読込、ダイアログ・ボックス内に選択した写真の表示、
EXIFデータから地図上にマーカーを表示する機能を追加した JavaScriptファイルです。
追加した箇所は赤字で表示しています。
『 Dialog_Additional_003.js 』のソースファイル内容
001 // Dialog_Additional_003.js 2019/5/17 by T. Fujita
002
003 var Set_Text = "";
004 var Set_Link = " ";
005 var Icon_Url = "../ICONS/BW_Icon/BW_Icons_64/icon_000200_64.png";
006 var Icon_W = 24;
007 var Icon_H = 24;
008 var Icon_AW = Math.round(Icon_W / 2);
009 var Icon_AH = Math.round(Icon_H / 2);
010 var Icon_PW = 0;
011 var Icon_PH = Math.round(Icon_H / 2) * -1;
012 var Max_M_Size = 64;
013 var Min_M_Size = 8;
014 var Data_CSV = new Array();
015 var Photo_file = new Array();
016 var file;
017
018 $(document).ready( function() {
019 $("body").append('<div id="dialog_001" style="z-index: 2000;"><p><form name="Form_001"> Title: '+
020 '<input type="text" style="width: 230px;" name="txt_mk" value=""></form><BR>'+
021 '<div>Marker Select:<BR>'+
022 '<select id="Marker_Samples" name="Marker_Samples" style="width:150px;">'+
023 '<option value="1" title="../ICONS/BW_Icon/BW_Icons_64/icon_000200_64.png">001</option>'+
024 '<option value="2" title="../ICONS/BW_Icon/BW_Icons_64/icon_127890_64.png">002</option>'+
025 '<option value="3" title="../ICONS/BW_Icon/BW_Icons_64/icon_114880_64.png">003</option>'+
026 '<option value="4" title="../ICONS/BW_Icon/BW_Icons_64/icon_109890_64.png">004</option>'+
027 '<option value="5" title="../ICONS/BW_Icon/BW_Icons_64/icon_001050_64.png">005</option>'+
028 '<option value="6" title="../ICONS/BW_Icon/BW_Icons_64/icon_119170_64.png">006</option>'+
029 '<option value="7" title="../ICONS/BW_Icon/BW_Icons_64/icon_122590_64.png">007</option>'+
030 '<option value="8" title="../ICONS/BW_Icon/BW_Icons_64/icon_000220_64.png">008</option>'+
031 '<option value="9" title="../ICONS/BW_Icon/BW_Icons_64/icon_133000_64.png">009</option>'+
032 '<option value="10" title="../ICONS/BW_Icon/BW_Icons_64/icon_115740_64.png">010</option>'+
033 '<option value="11" title="../ICONS/BW_Icon/BW_Icons_64/icon_115710_64.png">011</option>'+
034 '<option value="12" title="../ICONS/BW_Icon/BW_Icons_64/icon_115750_64.png">012</option>'+
035 '<option value="13" title="../ICONS/BW_Icon/BW_Icons_64/icon_115720_64.png">013</option>'+
036 '<option value="14" title="../ICONS/BW_Icon/BW_Icons_64/icon_147060_64.png">014</option>'+
037 '<option value="15" title="../ICONS/BW_Icon/BW_Icons_64/icon_127900_64.png">015</option>'+
038 '<option value="16" title="../ICONS/BW_Icon/BW_Icons_64/icon_109850_64.png">016</option>'+
039 '<option value="17" title="../ICONS/BW_Icon/BW_Icons_64/icon_111050_64.png">017</option>'+
040 '<option value="18" title="../ICONS/BW_Icon/BW_Icons_64/icon_111060_64.png">018</option>'+
041 '<option value="19" title="../ICONS/BW_Icon/BW_Icons_64/icon_111520_64.png">019</option>'+
042 '<option value="20" title="../ICONS/BW_Icon/BW_Icons_64/icon_127100_64.png">020</option>'+
043 '<option value="21" title="../ICONS/BW_Icon/BW_Icons_64/icon_127110_64.png">021</option>'+
044 '<option value="22" title="../ICONS/BW_Icon/BW_Icons_64/icon_127120_64.png">022</option>'+
045 '<option value="23" title="../ICONS/BW_Icon/BW_Icons_64/icon_127130_64.png">023</option>'+
046 '<option value="24" title="../ICONS/BW_Icon/BW_Icons_64/icon_127140_64.png">024</option>'+
047 '<option value="25" title="../ICONS/BW_Icon/BW_Icons_64/icon_127150_64.png">025</option>'+
048 '<option value="26" title="../ICONS/BW_Icon/BW_Icons_64/icon_127160_64.png">026</option>'+
049 '<option value="27" title="../ICONS/BW_Icon/BW_Icons_64/icon_001720_64.png">027</option>'+
050 '<option value="28" title="../ICONS/BW_Icon/BW_Icons_64/icon_100590_64.png">028</option>'+
051 '<option value="29" title="../ICONS/BW_Icon/BW_Icons_64/icon_100600_64.png">029</option>'+
052 '<option value="30" title="../ICONS/BW_Icon/BW_Icons_64/icon_102040_64.png">030</option>'+
053 '<option value="31" title="../ICONS/BW_Icon/BW_Icons_64/icon_104940_64.png">031</option>'+
054 '<option value="32" title="../ICONS/BW_Icon/BW_Icons_64/icon_107470_64.png">032</option>'+
055 '<option value="33" title="../ICONS/BW_Icon/BW_Icons_64/icon_108510_64.png">033</option>'+
056 '<option value="34" title="../ICONS/BW_Icon/BW_Icons_64/icon_108730_64.png">034</option>'+
057 '<option value="35" title="../ICONS/BW_Icon/BW_Icons_64/icon_111960_64.png">035</option>'+
058 '<option value="36" title="../ICONS/BW_Icon/BW_Icons_64/icon_111970_64.png">036</option>'+
059 '<option value="37" title="../ICONS/BW_Icon/BW_Icons_64/icon_112440_64.png">037</option>'+
060 '<option value="38" title="../ICONS/BW_Icon/BW_Icons_64/icon_112450_64.png">038</option>'+
061 '<option value="39" title="../ICONS/BW_Icon/BW_Icons_64/icon_113000_64.png">039</option>'+
062 '<option value="40" title="../ICONS/BW_Icon/BW_Icons_64/icon_113010_64.png">040</option>'+
063 '<option value="41" title="../ICONS/BW_Icon/BW_Icons_64/icon_114520_64.png">041</option>'+
064 '<option value="42" title="../ICONS/BW_Icon/BW_Icons_64/icon_114530_64.png">042</option>'+
065 '<option value="43" title="../ICONS/BW_Icon/BW_Icons_64/icon_114770_64.png">043</option>'+
066 '<option value="44" title="../ICONS/BW_Icon/BW_Icons_64/icon_114780_64.png">044</option>'+
067 '<option value="45" title="../ICONS/BW_Icon/BW_Icons_64/icon_128020_64.png">045</option>'+
068 '<option value="46" title="../ICONS/BW_Icon/BW_Icons_64/icon_124660_64.png">046</option>'+
069 '<option value="47" title="../ICONS/BW_Icon/BW_Icons_64/icon_127930_64.png">047</option>'+
070 '<option value="48" title="../ICONS/Flat_Icons/s64_f_business_72_0nbg.png">048</option>'+
071 '<option value="49" title="../ICONS/Flat_Icons/s64_f_business_76_0nbg.png">049</option>'+
072 '<option value="50" title="../ICONS/Flat_Icons/s64_f_object_6_2nbg.png">050</option>'+
073 '<option value="51" title="../ICONS/Flat_Icons/s64_f_object_7_2nbg.png">051</option>'+
074 '<option value="52" title="../ICONS/Flat_Icons/s64_f_object_24_1nbg.png">052</option>'+
075 '<option value="53" title="../ICONS/Flat_Icons/s64_f_object_25_0nbg.png">053</option>'+
076 '<option value="54" title="../ICONS/Flat_Icons/s64_f_object_27_2nbg.png">054</option>'+
077 '<option value="55" title="../ICONS/Flat_Icons/s64_f_object_155_1nbg.png">055</option>'+
078 '<option value="56" title="../ICONS/Flat_Icons/s64_f_object_164_2nbg.png">056</option>'+
079 '<option value="57" title="../ICONS/Flat_Icons/s64_f_object_167_0nbg.png">057</option>'+
080 '<option value="58" title="../ICONS/Flat_Icons/s64_f_object_173_0nbg.png">058</option>'+
081 '<option value="59" title="../ICONS/Flat_Icons/s64_f_object_115_0nbg.png">059</option>'+
082 '<option value="60" title="../ICONS/Flat_Icons/s64_f_object_116_1nbg.png">060</option>'+
083 '</select></div><BR>'+
084 '<div><tr><td><BR><div id="num_001"></div><div id="slider_001"></div>'+
085 '<BR><BR><div id="Selected_Icon">Selected Icon: <img src=""></div>'+
086 '</td></tr></div><BR>(注) ここで使用しているアイコン素材は、<A HREF = "http://flat-icon-design.com/" target="_blank"> FLAT ICON DESIGN </A>および' +
087 '<A HREF = "http://icooon-mono.com/" target="_blank"> ICOON MONO </A>から取得しており、<BR>' +
088 'これらアイコン素材データの著作権は TopeconHeroes が保持しています。</p><div>');
089
090 $('#Selected_Icon img').attr('src', Icon_Url);
091
092 $('#dialog_001').dialog({
093 autoOpen: false,
094 title: 'Please Set the Icon Style.',
095 height: 450,
096 width: 300,
097 closeOnEscape: true,
098 modal: true,
099 buttons: {
100 "設定": function(){
101 Set_Text = document.Form_001.txt_mk.value;
102 var Temp = Marker_Samples.options[Marker_Samples.selectedIndex].title;
103 Icon_Url = Temp;
104 Icon_AW = Math.round(Icon_W / 2);
105 Icon_AH = Math.round(Icon_H / 2);
106 Icon_PW = 0;
107 Icon_PH = Math.round(Icon_H / 2) * -1;
108 Change_Marker();
109 $(this).dialog('close');
110 }
111 }
112 });
113
114 $("body").append('<div id="dialog_002" style="z-index: 2000;"><p><form name="Form_002">'+
115 'Title: <input type="text" style="width: 230px;" name="txt_dat" value=""></form></p><HR>'+
116 '<p> File Select:'+
117 '<form name="subinput">'+
118 '<center>CSVファイルを指定してください。<BR><BR>'+
119 ' <TD><input type="file" name="select" id="select_002" value="" onchange="CSV_Data()"></TD>'+
120 ' <BR><BR>'+
121 '</center></form></p></div>');
122
123 $('#dialog_002').dialog({
124 autoOpen: false,
125 title: 'CSVファイル選択',
126 height: 400,
127 width: 300,
128 closeOnEscape: true,
129 modal: true,
130 show: "fade",
131 hide: "fade",
132 buttons: {
133 "Select the Marker": function(){
134 Dialog_001();
135 },
136 "Set Markers": function(){
137 CSV_Markers();
138 },
139 "Close": function(){
140 $(this).dialog('close');
141 }
142 }
143 });
144
145 $("body").append('<div id="dialog_AD_002" style="z-index: 2000;"><p><form name="Form_AD_002">'+
146 'Title: <input type="text" style="width: 230px;" name="txt_file" value=""></form></p><HR>'+
147 '<p> File Select: 写真ファイルを指定してください。'+
148 '<form name="photoinput">'+
149 '<center><TD><input type="file" accept="image/*" name="select_AD" id="select_AD_002" value="" onchange="updateImageDisplay()"></TD>'+
150 ' <BR>'+
151 '<div class="preview"><p>ファイルが選択されていません</p></div></center></form></p></div>');
152
153 $('#dialog_AD_002').dialog({
154 autoOpen: false,
155 title: '写真ファイル選択',
156 height: 400,
157 width: 300,
158 closeOnEscape: true,
159 modal: true,
160 show: "fade",
161 hide: "fade",
162 buttons: {
163 "Select the Marker": function(){
164 Dialog_001();
165 },
166 "Set Photo Marker": function(){
167 Photo_Data();
168 },
169 "Close": function(){
170 $(this).dialog('close');
171 }
172 }
173 });
174
175
176 $('#slider_001').slider( {
177 orientation: 'horizontal',
178 range: 'min',
179 max: 255,
180 value: 127,
181 slide: refreshSwatch,
182 change: refreshSwatch
183 } );
184 $( '#slider_001' ).slider( 'value', 96 );
185 $( '#Marker_Samples' ).msDropDown({
186 visibleRows:4,
187 on:{change:function(data, ui) {
188 Icon_Url = Marker_Samples.options[Marker_Samples.selectedIndex].title;
189 $('#Selected_Icon img').attr('src', Icon_Url);
190 }}
191 });
192 });
193
194
195 function Dialog_001() {
196 document.Form_001.txt_mk.value = "";
197 $('#dialog_001').dialog('open');
198 }
199
200 function Dialog_002() {
201 document.Form_002.txt_dat.value = "";
202 document.subinput.select.value = "";
203 $('#dialog_002').dialog('open');
204 }
205
206 function Dialog_Additional_002() {
207 var preview = document.querySelector('.preview');
208 document.Form_AD_002.txt_file.value = "";
209 document.photoinput.select_AD.value = "";
210 while(preview.firstChild){
211 preview.removeChild(preview.firstChild);
212 }
213 $('#dialog_AD_002').dialog('open');
214 }
215
216
217 function refreshSwatch() {
218 Icon_W = Math.round($('#slider_001').slider('value') / 255 * Max_M_Size);
219 if (Icon_W <= Min_M_Size) { Icon_W = Min_M_Size; }
220 Icon_H = Icon_W;
221 $( '#num_001' ).html( 'Marker Size： ' + Icon_W );
222 $( '#Selected_Icon img' ).css( { width: Icon_W, height: Icon_H } );
223 }
224
225 function CSV_Data() {
226 var file_input = $('#select_002');
227 var fileData = file_input[0].files[0];
228
229 Data_CSV = [];
230 var reader = new FileReader();
231 reader.onerror = function() {
232 alert('ファイル読み込みに失敗しました。');
233 }
234 reader.onload = function() {
235 var lineArr = reader.result.split("\r\n");
236 for (var i = 0; i < lineArr.length; i++) {
237 Data_CSV[i] = lineArr[i].split(",");
238 }
239 }
240 reader.readAsText(fileData);
241 }
242
243 function Photo_Data() {
244 var Temp_Lat;
245 var Temp_Lon;
246 var Temp_Date;
247 var Temp_Name;
248 var Temp_Pos;
249 var NSEW;
250 var image = document.createElement('img');
251 image.src = window.URL.createObjectURL(file);
252
253 EXIF.getData(file, function() { // EXIF.getDataでexif情報を解析
254 Temp_Pos = EXIF.getTag(this, "GPSLatitude"); // EXIF.getTag(this, "[exifのタグ名]")で、値を取得
255 if( Temp_Pos === undefined ) {
256 alert("写真の位置情報はありません！\n" + "マーカーは任意の位置に移動できます。");
257 Photo_Data_Set();
258 } else {
259 Temp_Pos = EXIF.getTag(this, "GPSLatitude");
260 NSEW = EXIF.getTag(this, "GPSLatitudeRef");
261 if(NSEW == "N") {
262 Temp_Lat = Temp_Pos[0] + Temp_Pos[1]/60 + Temp_Pos[2]/60/60;
263 } else {
264 Temp_Lat = (Temp_Pos[0] + Temp_Pos[1]/60 + Temp_Pos[2]/60/60) * -1.0;
265 }
266 Temp_Pos = EXIF.getTag(this, "GPSLongitude");
267 NSEW = EXIF.getTag(this, "GPSLongitudeRef");
268 if(NSEW == "E") {
269 Temp_Lon = Temp_Pos[0] + Temp_Pos[1]/60 + Temp_Pos[2]/60/60;
270 } else {
271 Temp_Lon = (Temp_Pos[0] + Temp_Pos[1]/60 + Temp_Pos[2]/60/60) * -1.0;
272 }
273 Temp_Date = EXIF.getTag(this, "DateTimeOriginal");
274 Temp_Name = file.name;
275 Photo_Marker_LAT[ Photo_Marker_count ] = Temp_Lat;
276 Photo_Marker_LON[ Photo_Marker_count ] = Temp_Lon;
277 Photo_Marker_NAM[ Photo_Marker_count ] = Temp_Date + "の写真";
278 Photo_Marker_LNK[ Photo_Marker_count ] = file;
279 Photo_Marker_ICN[ Photo_Marker_count ] = L.icon({
280 iconUrl: Icon_Url,
281 iconSize: [Icon_W, Icon_H],
282 iconAnchor : [Icon_AW, Icon_AH],
283 popupAnchor: [Icon_PW, Icon_PH]
284 });
285 Photo_Marker_ID[ Photo_Marker_count ] = "Photo" + Photo_Marker_ID_count;
286 Photo_Marker_Drag_flag[ Photo_Marker_count ] = false;
287 Photo_Marker_Drag_info[ Photo_Marker_count ] = "マウスで移動出来ません。";
288 Temp = Photo_Marker_count;
289 Photo_Marker_Setting();
290 Photo_Marker_Set();
291 Layer_AD003[ Temp ] = Temp_shape;
292 Layer_AD003[ Temp ].addTo(map_AD003);
293 Layer_AD003_clone[ Temp ] = Temp_shape_clone;
294 Layer_AD003_clone[ Temp ].addTo(map_AD003);
295 Photo_Marker_count = Photo_Marker_count + 1;
296 Photo_Marker_ID_count = Photo_Marker_ID_count + 1;
297 }
298 });
299 }
300
301 function Photo_Data_Set() {
302 var Temp_Lat = map_AD003.getCenter().lat;
303 var Temp_Lon = map_AD003.getCenter().lng;
304 var Temp_Name;
305 var image = document.createElement('img');
306 image.src = window.URL.createObjectURL(file);
307 Temp_Name = file.name;
308 Photo_Marker_LAT[ Photo_Marker_count ] = Temp_Lat;
309 Photo_Marker_LON[ Photo_Marker_count ] = Temp_Lon;
310 Photo_Marker_NAM[ Photo_Marker_count ] = Temp_Name + "の写真";
311 Photo_Marker_LNK[ Photo_Marker_count ] = file;
312 Photo_Marker_ICN[ Photo_Marker_count ] = L.icon({
313 iconUrl: Icon_Url,
314 iconSize: [Icon_W, Icon_H],
315 iconAnchor : [Icon_AW, Icon_AH],
316 popupAnchor: [Icon_PW, Icon_PH]
317 });
318 Photo_Marker_ID[ Photo_Marker_count ] = "Photo" + Photo_Marker_ID_count;
319 Photo_Marker_Drag_flag[ Photo_Marker_count ] = true;
320 Photo_Marker_Drag_info[ Photo_Marker_count ] = "マウスで移動出来ます。";
321 Temp = Photo_Marker_count;
322 Photo_Marker_Setting();
323 Photo_Marker_Set();
324 Layer_AD003[ Temp ] = Temp_shape;
325 Layer_AD003[ Temp ].addTo(map_AD003);
326 Layer_AD003_clone[ Temp ] = Temp_shape_clone;
327 Layer_AD003_clone[ Temp ].addTo(map_AD003);
328 Photo_Marker_count = Photo_Marker_count + 1;
329 Photo_Marker_ID_count = Photo_Marker_ID_count + 1;
330 }
331
332 function updateImageDisplay() {
333 var preview = document.querySelector('.preview');
334 var file_input = $('#select_AD_002');
335 file = file_input[0].files[0];
336 var para = document.createElement('p');
337 if(file === undefined) {
338 para.textContent = 'ファイルが選択されていません！';
339 preview.removeChild(preview.childNodes.item(0));
340 preview.appendChild(para);
341 } else {
342 para.textContent = 'ファイル名： ' + file.name;
343 while(preview.firstChild){
344 preview.removeChild(preview.firstChild);
345 }
346 preview.appendChild(para);
347 var image = document.createElement('img');
348 image.src = window.URL.createObjectURL(file);
349 preview.appendChild(image);
350 }
351 }
Previous Page Next Page